<template>
  <div v-bind:id="node.path" v-bind:class="['filetree-node-container',{'highlight':node.isHighlighted}]" data-droppable="FILE_TREE_NODE" @contextmenu="handleContentMenu">
    <div v-if="shouldHiddenFolder" v-bind:class="['filetree-node', {'focus':node.isFocused}]" :style="{paddingLeft:`${1+node.depth}em`}" @dblclick="handleOpenNode" @click="handleSelectNode">
      <span class="filetree-node-arrow" @click="handleOpenNode">
        <i v-if="node.isDir" v-bind:class="['fa',node.isFolded?'fa-angle-right':'fa-angle-down']"></i>
      </span>
      <span class="filetree-node-icon">
        <i v-bind:class="['fa',{'fa-briefcase':node.isRoot, 'fa-folder-o':node.isDir && !node.isRoot, 'fa-file-o':!node.isDir}]"></i>
      </span>
      <span v-bind:class="nodeNameClassArray">
         {{node.name || config.projectName }}
      </span>
    </div>
    <div v-if="node.isDir" v-bind:class="['filetree-node-children',{isFolded: node.isFolded}]">
      <FileTreeNode v-for="childNode in node.children" v-bind:path="childNode.path" />
    </div>
  </div>
</template>
<script>
  import { mapMutations, mapActions } from 'vuex'
  import Config from 'app/config.js'

  export default {
    name: "FileTreeNode",
    props: ['path'],
    data: function () { return { Config } },
    computed: {
      node: function () {
        let nodes = this.$store.state.file.nodes[this.path]
        return nodes
      },
      shouldHiddenFolder: function () {
        return ['.git', '.coding-ide'].indexOf(this.node.name) === -1
      },
      nodeNameClassArray: function () {
        let c = `git-${this.node.gitStatus ? this.node.gitStatus.toLowerCase() : 'none'}`
        let classArray = [c, 'filetree-node-label']
        return classArray
      }
    },
    methods: {
      ...mapMutations('file', {
        selectNode: 'selectFileNode',
        openContextMenu: 'openContextMenu'
      }),
      ...mapActions('file', {
        openNode: 'openFileNode'
      }),
      handleContentMenu: function (e) {
        this.selectNode(this.node)
        e.stopPropagation()
        e.preventDefault()
        this.openContextMenu({
           pos: { x: e.clientX, y: e.clientY },
           contextNode: this.node
        })
      },
      handleOpenNode: function (e) {
        this.openNode([this.node, null, e.altKey])

      },
      handleSelectNode: function () {
        this.selectNode(this.node)
      }
    }
  }

</script>
